<!-- home页面 -->
<template>
  <div class="home-container">
    <div>
      <!-- <div class="city"> {{city}} </div> -->
      <router-link tag="div" to="/home/searchaddress"> {{ city }} </router-link>
      <router-link tag="div" to="/home/goodsSearch"> 商品搜索 </router-link>
    </div>
    <van-swipe indicator-color="#000">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img class="img" :src="item.image_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-button type="primary" @click="getGoodsDetail">获取商品详情</van-button>
    <van-button type="danger" @click="submitAction">意见反馈</van-button>
    <div>测试</div>
    <router-link to="/home/goodsList?flag=0">新品首发</router-link>
    <router-link to="/home/goodsList?flag=1">人气推荐</router-link>
    <!-- 地图容器 -->
    <div id="container"></div>
  </div>
</template>

<script>
// import axios from 'axios'
// import instance from '@/api/request'

import {
  index as indexApi,
  detailaction as detailactionApi,
  submitAction as submitActionApi
} from '@/api/home'
export default {
  name: 'Home',
  data() {
    return {
      city: '',
      banner: []
    }
  },

  components: {},

  computed: {},

  created() {
    // instance({
    //   url: '/bufan/index/index',
    //   method: 'get',
    // }).then((res) => {
    //   console.log('res=>', res)
    //   this.banner = res.data.banner
    // })

    indexApi().then((res) => {
      console.log('res=>', res)
      this.banner = res.banner
    })
  },

  mounted() {
    /* // 创建map实例
    var map = new AMap.Map('container',{
        zoom:15,//级别 0 - 20
        center: [113.60,34.75],//中心点坐标 和昌大厦
        viewMode:'3D'//使用3D视图
    });

    var marker = new AMap.Marker({
      position:[113.60,34.75]//位置
    })
    map.add(marker);//添加到地图 */

    // 第一种地位
    var map = new AMap.Map('container', {
      zoom: 10
    })
    /*  console.log('AMap.event=>',AMap.event);
  
    // 浏览器定位
   
    AMap.plugin('AMap.Geolocation', function () {
      var geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
        // 定位按钮的停靠位置的偏移量
        offset: [10, 20],
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        position: 'RB'
      })

      geolocation.getCurrentPosition(function (status, result) {
        if (status == 'complete') {
          onComplete(result)
        } else {
          onError(result)
        }
      })

      function onComplete(data) {
        // data是具体的定位信息
        console.log('成功',data);
        
      }

      function onError(data) {
        // 定位出错
        console.log('失败',data);
        
      }
    }) */

    // 定位前，先判断 state 中是否有值，
    // 如果有，就显示 state 中的值
    // 否则，去定位
    // {} 转换成 boolean是 true
    let address = this.$store.state.address
    if (address.name) {
      this.city = address.name
    } else {
      // 第三种定位 IP
      var _this = this
      AMap.plugin('AMap.CitySearch', function () {
        var citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
            // console.log('result=>',result);
            // console.log('this=>',this);
            _this.city = result.city
          }
        })
      })
    }
  },

  methods: {
    async getGoodsDetail() {
      let res = await detailactionApi({
        id: '1009024',
        openId: localStorage.getItem('openId')
      })

      console.log('res=>', res)
    },
    // 提交反馈
    async submitAction() {
      let res = await submitActionApi({
        content: '商品类目太少',
        name: JSON.parse(localStorage.getItem('userInfo')).nickName,
        openId: localStorage.getItem('openId'),
        phone: '13599999999'
      })

      console.log('res=>', res)
    }
  }
}
</script>
<style lang='scss' scoped>
@import 'index.scss';
#container {
  width: 300px;
  height: 180px;
}
</style>